<template>
	<div class="partner-div">
		<p class='tip'>点击选择将包裹提交给</p>
		<!--选择的伙伴-->
		<view class="uni-list">
            <radio-group @change="radioChange">
				<!--本人-->
				<!-- <label class="uni-list-cell uni-list-cell-pd">
				    <view class='info'>
				        <radio :value="userInfo.id" :checked="chooseIndex==-1" />
						<image :src="userInfo.img" mode=""></image>
						<span @click.stop='modifyInfo'>{{userInfo.name}}（本人）</span>
				    </view>
				</label> -->
				<!--合作伙伴-->
                <label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in partnerList" :key="index">
                    <view class='info'>
                        <radio :value="index" />
						<image :src="item.img" mode=""></image>
						<span>{{item.name}}</span>
						<span v-show='item.default==1' class='isdefault'>默认</span>
                    </view>
                    <span class='iconfont icon-modify' @click.stop='modifyInfo(index)'></span>
                </label>
            </radio-group>
        </view>
		
		<!--模态框-->
		<unikModal 
			ref="unikModal"
			modalTitle="编辑备注名"
			@confirmModal="confirmModal"
			>
			<input type="text" v-model='edit_name' placeholder="请输入">
		</unikModal>
	</div>
</template>

<script>
import unikModal from '../../components/unik-modal.vue';
import {post,showToast,checkHtml} from '../../utils/index.js';
import {getMypartnersUrl,setMyDefaultPartnerUrl,setMyPartnerNameUrl,
		cancelMyPartnerUrl} from '../../config.js';
import {mapGetters,mapActions} from 'vuex';
export default {
	data() {
		return {
			partnerList: [],  //合作伙伴
			editIndex: 0,  //编辑伙伴信息的序列号
			edit_name: '',  //编辑的名称
			currentPage: 1,  //当前页码
			nomore: false,  //没有更多
		};
	},
	computed: {
		...mapGetters(['userInfo'])
	},
	components: {
		unikModal
	},
	mounted(){
		this.getPartners();
	},
	methods: {
		initData(){
			this.partnerList = [];  //合作伙伴
			this.editIndex = 0;  //编辑伙伴信息的序列号
			this.edit_name = '';  //编辑的名称
			this.currentPage = 1;  //当前页码
			this.nomore = false;  //没有更多
		},
		//改变radio选中
		radioChange(e){
			let index = Number(e.detail.value);
			let obj = this.partnerList[index];
			let tmpObj = {
				img: obj.img,
				name: obj.name,
				uid: obj.id,
				isMe: obj.isMe
			};
			this.$store.dispatch('setSendPackageTo', tmpObj);
			uni.navigateBack({
				delta: 1
			});
		},
		//获取我的伙伴列表
		getPartners(){
			var self = this;
			if(this.nomore){
				showToast('没有更多');
				return;
			};
			post(getMypartnersUrl, {
				session_token: self.userInfo.session_token,
				page: self.currentPage
			})
			.then((res)=>{
				if(res.code==200){
					let data = res.data;
					let pages = data.page_count;
					let listData = data.list;
					if(listData && listData.length>0){
						self.partnerList = [...self.partnerList, ...listData];
					};
					self.currentPage++;
					if(self.currentPage>pages){
						self.nomore = true;
					};
				}else{
					showToast(res.errMsg);
				};
			});
		},
		//修改伙伴信息
		modifyInfo(index){
			var self = this;
			self.editIndex = index;
			self.edit_name = this.partnerList[index].name;
			var itemList;
			if(this.partnerList[index].default){  //是默认
				itemList = ['设置备注名','解除绑定'];
			}else{
				itemList = ['设置备注名','设为默认','解除绑定'];
			}
			uni.showActionSheet({
				itemList: itemList,
				success(res){
					var chosenIndex = res.tapIndex;  //选中的序列号
					if(chosenIndex===0){  //设置备注名
						self.$refs.unikModal.show();
					}else if(chosenIndex==1 && !self.partnerList[index].default){
						//设为默认
						post(setMyDefaultPartnerUrl, {
							session_token: self.userInfo.session_token,
							id: self.partnerList[index].id  //伙伴的id
						})
						.then((res)=>{
							if(res.code==200){
								showToast('设置成功','success');
								self.partnerList.map((item,i)=>{
									item.default = index==i;
								});
							}else{
								showToast(res.errMsg);
							}
						});
					}else{  //解除绑定
						post(cancelMyPartnerUrl, {
							session_token: self.userInfo.session_token,
							id: self.partnerList[index].id  //伙伴的id
						})
						.then((res)=>{
							if(res.code==200){
								showToast('解除成功','success');
								self.partnerList.splice(index,1);
							}else{
								showToast(res.errMsg);
							}
						})
					}
				}
			});
		},
		//确定修改
		confirmModal(){
			var self = this;
			var index = this.editIndex;
			let oriName = self.partnerList[index].name;  //原先名字
			self.$refs.unikModal.close(); //隐藏模态框
			if(!self.edit_name){
				showToast('请输入备注名');
				return;
			};
			if(checkHtml(self.edit_name)){
				showToast('备注名不合法');
				return;
			};
			if(self.edit_name==oriName){
				showToast('备注名未修改');
				return;
			};
			post(setMyPartnerNameUrl, {
				session_token: self.userInfo.session_token,
				id: self.partnerList[index].id,  //伙伴的id
				name: self.edit_name
			})
			.then((res)=>{
				if(res.code==200){
					showToast('修改成功','success');
					self.partnerList[index].name = self.edit_name;
				}else{
					showToast(res.errMsg);
				}
			});
		}
	},
	onPullDownRefresh(){
		//下拉刷新
		uni.stopPullDownRefresh();
		uni.hideNavigationBarLoading();
		this.initData();
		this.getPartners();
	},
	onReachBottom() {
		this.getPartners();
	}
}
</script>

<style lang="less">
@import '../../style/default.less';
.partner-div{
	padding-bottom:20upx;
}
/**提示信息**/
.tip{
	line-height: 60upx;
	padding: 0 10upx;
	color: #999;
}
.info{
	height: 100%;
	display: flex;
	align-items: center;
	image{
		width: 80upx;
		height: 80upx;
		border-radius: 50%;
		margin: 0 10upx;
	}
	/*是否是默认*/
	.isdefault{
		margin-left: 10upx;
		padding: 4upx 8upx;
		border: 1px solid @mainColor;
		color: @mainColor;
		font-size: 20upx;
		border-radius: 8upx;
	}
}
/**修改图标**/
.icon-modify{
	font-size: 50upx;
}
</style>
